<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF拼接工具</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="app-container">
        <!-- 顶部标题栏 -->
        <header class="app-header">
            <h1>PDF拼接工具</h1>
            <p>上传PDF文件，拖拽到画布进行拼接</p>
        </header>

        <!-- 主工作区域 - 三栏布局 -->
        <div class="main-workspace">
            <!-- 左侧面板：文件上传和页面缩略图 -->
            <div class="left-panel">
                <div class="panel-header">
                    <h3>📁 源文件</h3>
                </div>
                
                <!-- 文件上传区域 -->
                <div class="upload-area" id="uploadArea">
                    <div class="upload-content">
                        <i class="upload-icon">📄</i>
                        <p>拖拽PDF文件到此处</p>
                        <button class="btn btn-primary btn-sm">选择文件</button>
                        <input type="file" id="fileInput" accept=".pdf" multiple style="display: none;">
                    </div>
                </div>

                <!-- 上传的文件列表 -->
                <div class="uploaded-files-list" id="uploadedFilesList"></div>

                <!-- 页面缩略图区域 -->
                <div class="source-pages-container">
                    <div class="section-title">📖 页面预览</div>
                    <div class="source-pages" id="sourcePages">
                        <div class="empty-state">
                            <p>上传PDF文件后，页面缩略图将显示在此处</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 中间画布：拖拽操作区域 -->
            <div class="center-canvas">
                <div class="panel-header">
                    <h3>🎨 设计画布</h3>
                    <div class="canvas-controls">
                        <button class="btn btn-primary btn-sm" onclick="addCanvasPage()">+ 添加页面</button>
                        <button class="btn btn-secondary btn-sm" onclick="clearCanvas()">清空画布</button>
                        <div class="overlap-controls">
                            <label class="overlap-switch">
                                <input type="checkbox" id="allowOverlap" checked onchange="toggleOverlapMode()">
                                <span class="overlap-switch-slider"></span>
                                <span class="overlap-switch-label">允许重叠</span>
                            </label>
                        </div>
                        <div class="zoom-controls">
                            <button class="btn btn-sm" onclick="adjustZoom(-10)" title="缩小">-</button>
                            <span id="zoomDisplay">100%</span>
                            <button class="btn btn-sm" onclick="adjustZoom(10)" title="放大">+</button>
                            <button class="btn btn-sm" onclick="resetZoom()" title="重置缩放">重置</button>
                        </div>
                    </div>
                </div>
                
                <div class="canvas-area" id="canvasArea">
                    <div class="canvas-empty-state">
                        <div class="empty-icon">🎯</div>
                        <h4>开始设计您的PDF</h4>
                        <p>1. 点击"添加页面"创建新页面</p>
                        <p>2. 从左侧拖拽页面到此处</p>
                        <p>3. 调整页面位置和设置</p>
                    </div>
                    <div class="canvas-pages" id="canvasPages"></div>
                </div>
            </div>

            <!-- 右侧面板：PDF结构设置 -->
            <div class="right-panel">
                <div class="panel-header">
                    <h3>📄 PDF结构设置</h3>
                </div>

                <!-- PDF基本设置 -->
                <div class="settings-section">
                    <h4>文件设置</h4>
                    <div class="pdf-settings">
                        <input type="text" id="outputFileName" placeholder="输出文件名" value="merged" class="form-input">
                        <div class="page-count-control">
                            <label>页数:</label>
                            <div class="count-controls">
                                <button class="btn btn-sm" onclick="adjustPageCount(-1)">-</button>
                                <span id="pageCountDisplay">0</span>
                                <button class="btn btn-sm" onclick="adjustPageCount(1)">+</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 标签页导航 -->
                <div class="tabs-navigation">
                    <button class="tab-btn active" onclick="switchTab('pageList')">📋 页面列表</button>
                    <button class="tab-btn" onclick="switchTab('pageSettings')">📐 当前页面</button>
                    <button class="tab-btn" onclick="switchTab('elementSettings')">🎯 选中元素</button>
                </div>

                <!-- 标签页内容区域 -->
                <div class="tabs-content">
                    <!-- 页面列表标签页 -->
                    <div class="tab-panel active" id="pageListTab">
                        <div class="tab-panel-header">
                            <button class="btn btn-primary btn-sm" onclick="addPdfPage()">+ 添加页面</button>
                        </div>
                        <div class="pdf-pages-list" id="pdfPagesList">
                            <div class="empty-state">
                                <p>点击"+ 添加页面"开始创建PDF结构</p>
                            </div>
                        </div>
                    </div>

                    <!-- 当前页面设置标签页 -->
                    <div class="tab-panel" id="pageSettingsTab">
                        <div class="tab-panel-content">
                            <div id="currentPageInfo" class="current-page-info">
                                <p class="no-selection">请选择一个PDF页面</p>
                            </div>
                            <div class="size-controls" id="sizeControls" style="display: none;">
                                <h5>页面尺寸</h5>
                                <div class="size-presets">
                                    <button class="btn btn-sm" onclick="setCurrentPageSize(210, 297)">A4</button>
                                    <button class="btn btn-sm" onclick="setCurrentPageSize(148, 210)">A5</button>
                                    <button class="btn btn-sm" onclick="setCurrentPageSize(297, 420)">A3</button>
                                    <button class="btn btn-sm" onclick="setCurrentPageSize(420, 297)">A3横</button>
                                </div>
                                <div class="size-inputs">
                                    <div class="size-input-row">
                                        <span>宽:</span>
                                        <input type="number" id="currentPageWidth" placeholder="宽(mm)" onchange="applyCurrentPageSize()" onblur="applyCurrentPageSize()">
                                        <span>mm</span>
                                    </div>
                                    <div class="size-input-row">
                                        <span>高:</span>
                                        <input type="number" id="currentPageHeight" placeholder="高(mm)" onchange="applyCurrentPageSize()" onblur="applyCurrentPageSize()">
                                        <span>mm</span>
                                    </div>
                                    <button class="btn btn-sm btn-primary size-apply-btn" onclick="applyCurrentPageSize()">应用</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 选中元素设置标签页 -->
                    <div class="tab-panel" id="elementSettingsTab">
                        <div class="tab-panel-content">
                            <div id="elementSettings" class="element-settings">
                                <p class="no-selection">请选择画布中的元素</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 生成PDF区域 -->
                <div class="generate-section">
                    <button class="btn btn-success btn-block" onclick="generatePdf()">
                        <span>📥</span> 生成并下载PDF
                    </button>
                    <button class="btn btn-secondary btn-block" onclick="clearAll()">
                        <span>🗑️</span> 清空所有
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 页面配置弹窗 -->
    <div class="modal" id="pageConfigModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>页面配置</h3>
                <span class="close" onclick="closeModal()">&times;</span>
            </div>
            <div class="modal-body">
                <div class="config-group">
                    <label>目标页面尺寸 (mm):</label>
                    <div class="size-inputs">
                        <input type="number" id="targetWidth" placeholder="宽度" value="210">
                        <span>×</span>
                        <input type="number" id="targetHeight" placeholder="高度" value="297">
                    </div>
                </div>
                
                <div class="config-group">
                    <label>变换设置:</label>
                    <div class="transform-inputs">
                        <div class="input-row">
                            <label>位置 (mm):</label>
                            <input type="number" id="offsetX" placeholder="X偏移" value="0" step="0.1">
                            <input type="number" id="offsetY" placeholder="Y偏移" value="0" step="0.1">
                        </div>
                        <div class="input-row">
                            <label>缩放:</label>
                            <input type="number" id="scaleX" placeholder="X缩放" value="1" step="0.01" min="0.1" max="5">
                            <input type="number" id="scaleY" placeholder="Y缩放" value="1" step="0.01" min="0.1" max="5">
                        </div>
                        <div class="input-row">
                            <label>旋转 (度):</label>
                            <input type="number" id="rotation" placeholder="旋转角度" value="0" step="1" min="-360" max="360">
                        </div>
                        <div class="input-row">
                            <label>裁切起点 (mm):</label>
                            <input type="number" id="cropX" placeholder="裁切X" value="0" step="0.1">
                            <input type="number" id="cropY" placeholder="裁切Y" value="0" step="0.1">
                        </div>
                        <div class="input-row">
                            <label>裁切尺寸 (mm):</label>
                            <input type="number" id="cropWidth" placeholder="裁切宽度" value="0" step="0.1">
                            <input type="number" id="cropHeight" placeholder="裁切高度" value="0" step="0.1">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" onclick="applyPageConfig()">应用</button>
                <button class="btn btn-secondary" onclick="closeModal()">取消</button>
            </div>
        </div>
    </div>

    <!-- 加载提示 -->
    <div class="loading" id="loading">
        <div class="loading-content">
            <div class="spinner"></div>
            <p>处理中...</p>
        </div>
    </div>

    <script src="js/index.js"></script>
</body>
</html>
